<template>
  <div class="SideBar" :class="collapse ? 'is-collapse-main' : ''">
    <el-scrollbar>
      <el-menu
        :collapse="collapse"
        router
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :background-color="variables['menu-background']"
        :text-color="variables['menu-color']"
        :active-text-color="variables['menu-color-active']"
      >
        <SideBarItem v-for="route in routes" :key="route.path"  :item="route" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import variables from "@/styles/variables.scss";
import SideBarItem from "../SideBarItem";
import routes from "@/router/routers";
import { mapGetters } from "vuex";
export default {
  components: {
    SideBarItem
  },
  data() {
    return { routes };
  },
  computed: {
    variables() {
      return variables;
    },
    ...mapGetters({
      collapse: "settings/collapse"
    })
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin active {
  &:hover {
    color: $base-color-white;
    background-color: $base-menu-background-active !important;
  }

  &.is-active {
    color: $base-color-white;
    background-color: $base-menu-background-active !important;
  }
}
.SideBar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: $base-z-index - 1;
  box-shadow: $base-box-shadow;
  width: $base-left-menu-width;
  background: $base-menu-background;
  transition: $base-transition;
  &.is-collapse-main {
    width: $base-left-menu-width-min;
  }
  ::v-deep {
    .el-scrollbar {
      height: 100%;
      overflow-x: hidden;
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .el-menu {
      border: 0;

      .vab-fas-icon {
        padding-right: 3px;
        font-size: $base-font-size-default;
      }

      .vab-remix-icon {
        padding-right: 3px;
        font-size: $base-font-size-default + 2;
      }
    }

    .el-menu-item,
    .el-submenu__title {
      height: $base-menu-item-height;
      overflow: hidden;
      line-height: $base-menu-item-height;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
    .el-menu-item {
      @include active;
    }
  }
}
</style>
